<template>
  <div class="line-chart-gradient" id="chart"></div>
</template>

<script>
  import * as echarts from 'echarts';
  import zlApi from '../../packages/zlDemo/toolApi.js'
  import axios from 'axios';
  import { toRef, ref, onMounted, markRaw } from 'vue';
  export default {
    props: {
      item: {
        type: Object,
        default: function() {
          return {}
        }
      }
    },
    data() {
      return {
        chart: null
      }
    },
    watch: {
      'item.attribute.height.value': {
        handler(v) {
          setTimeout(() => {
            this.chart.resize();
          }, 100)
        },
        deep: true
      }
    },
    setup(props) {
      let propItem = toRef(props, 'item')
      let option = ref(null)
      function getConfig(chartParam) {
        let serize = []
        chartParam.yAxis.map((item, index) => {
          serize.push({
            type: chartParam.yAxis[index].type,
            showSymbol: false,
            name: chartParam.yAxis[index].label,
            data: chartParam.yAxis[index].value
          })
        })
        const chartConfig = {
          // Make gradient line here
          visualMap: [{
              show: false,
              type: 'continuous',
              seriesIndex: 0,
              min: 0,
              max: 50
            }
          ],
          title: [{
              left: 'center',
              text: chartParam.title,
              subtext: chartParam.subTitle
            },
          ],
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [{
              data: chartParam.xAxis[0].value,
              axisLabel: {
                align: 'left',
                hideOverlap: false
              }
            }
          ],
          yAxis: [
            {
              gridIndex: 0
            }
          ],
          grid: [{
              // bottom: '60%'
            }
          ],
          series: serize
        }
        return chartConfig
      }
      // function getData() {
      //   let globalConfig = propItem.value.attribute;
      //   const protocol = globalConfig.chartReq.extendData.protocol
      //   axios[protocol](globalConfig.chartReq.extendData.address).then(res => {
      //     console.log('图表', res)
      //     let [data] = zlApi.handlerRes(res.data, globalConfig.chartReq.extendData.res)
      //     console.log('data', data)
      //     let chartParam = {
      //       ...handlerValue(globalConfig.chartValue.extendData, data),
      //       title: globalConfig.chartTitle.value,
      //       subTitle: globalConfig.chartSubTitle.value
      //     }
      //     option.value = getConfig(chartParam);
      //     // 初始化图表
      //     chartInit();
      //   })
      // }
      function handlerValue(config, data) {
        let xAxis = [];
        let yAxis = [];
        let tempData = {};
        data.map(item => {
          for (let key in item) {
            if (tempData[key]) {
              tempData[key].push(item[key])
            } else {
              tempData[key] = [item[key]]
            }
          }
        })
        console.log('tempData', tempData)
        config.xAxis.map(item => {
          xAxis.push({
            label: item.label,
            value: tempData[item.key]
          })
        })
        config.yAxis.map(item => {
          yAxis.push({
            label: item.label,
            value: tempData[item.key],
            type: item.type
          })
        })
        console.log('ddds', xAxis, yAxis)
        return {xAxis: xAxis, yAxis: yAxis}
      }
      // function chartInit() {
      //   console.log('刷新')
      //   myChart.value.setOption(option.value);
      //   myChart.value.resize();
      //   console.log('aa', myChart.value)
      // }
      // onMounted(() => {
      //   let dom = document.getElementById('chart')
      //   myChart = ref(echarts.init(dom));
      //   getData();
      // })

      // 调用

      return {
        option,
        getConfig,
        handlerValue
      }
    },
    methods: {
      getData() {
        let globalConfig = this.item.attribute;
        const protocol = globalConfig.chartReq.extendData.protocol
        axios[protocol](globalConfig.chartReq.extendData.address).then(res => {
          let [data] = zlApi.handlerRes(res.data, globalConfig.chartReq.extendData.res)
          let chartParam = {
            ...this.handlerValue(globalConfig.chartValue.extendData, data),
            title: globalConfig.chartTitle.value,
            subTitle: globalConfig.chartSubTitle.value
          }
          this.option = this.getConfig(chartParam);
          // 初始化图表
          this.chartInit();
        })
      },
      chartInit() {
        this.chart.setOption(this.option);
      }
    },
    mounted() {
      this.$nextTick(() => {
        let dom = document.getElementById('chart')
        this.chart = markRaw(echarts.init(dom));
        this.getData();
      })
    }
  }
</script>

<style scoped lang="less">
  .line-chart-gradient {
    width: 100%;
    height: 100%;
  }
</style>
